<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">

<head>
    <title th:text="#{cas.oauth.confirm.pagetitle}"></title>
</head>

<body id="cas">
<div layout:fragment="content" class="mdc-card card p-4 m-auto w-lg-66">
    <h2 th:text="#{cas.oauth.device.confirm.header}" />
    <p class="my-2" th:text="#{cas.oauth.device.confirm.message}" />
    <div class="banner banner-danger alert alert-danger my-2" th:if="${error}">
        <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
        <span th:utext="#{${'cas.oauth.device.error.' + error}}" />
    </div>
    <form method="post" id="fm1">
        <div class="cas-field form-group my-3 mdc-input-group">
            <div class="mdc-input-group-field mdc-input-group-field-append">
                <div class="d-flex">
                    <label for="usercode" class="mdc-text-field caps-check mdc-text-field--outlined control-label mdc-text-field--with-trailing-icon">
                        <span class="mdc-notched-outline">
                            <span class="mdc-notched-outline__leading"></span>
                            <span class="mdc-notched-outline__notch">
                                <span class="mdc-floating-label">Code:</span>
                            </span>
                            <span class="mdc-notched-outline__trailing"></span>
                        </span>
                        <input class="mdc-text-field__input form-control pwd"
                                placeholder="code..."
                                type="password"
                                name="usercode"
                                aria-describedby="code-prefix"
                                id="usercode"
                                aria-label="UserCode"
                                size="25"
                                autocomplete="off" required />
                    </label>
                    <i class="mdi mdi-alert fas fa-exclamation-triangle mdc-text-field__icon text-danger caps-warn"></i>
                </div>
            </div>
            <button class="reveal-password align-self-end mdc-button mdc-button--raised btn btn-primary mdc-input-group-append mdc-icon-button"
                tabindex="-1"
                type="button">
                <i class="mdi mdi-eye fas fa-eye reveal-password-icon"></i>
                <span class="visually-hidden">Toggle Password</span>
            </button>
        </div>
        <input class="mdc-button mdc-button--raised btn btn-primary" name="submit" th:value="#{screen.oauth.confirm.allow}"
            type="submit" value="Allow" />
    </form>
</div>
</body>

</html>
